import { CloseOutlined } from '@ant-design/icons';
import { Button, Spin, Timeline } from 'antd';
import '@ant-design/compatible/assets/index.css';
import { Scrollbars } from 'react-custom-scrollbars';
import styles from '../index.less';
import React, { useState, useCallback, useRef, useEffect } from 'react';
import LookList from './LookList';
import { filter } from 'minimatch';

const PassengerList = props => {
  const { handleAnimation, receiveList, paytypeVlaue, rightModelLoading } = props;
  const [modalVisible, handleModal] = useState(false);
  // 代领人详细数据
  const [detailData, handleDetailData] = useState({});

  // 代领旅客好类之后的数据
  const [allBehalfs, setAllBehalfs] = useState([]);


  // 分类代领旅客
  useEffect(() => {
    // 复制一个父组件传入的数据来源
    let copyReceiveList = JSON.parse(JSON.stringify(receiveList));
    // 申领人
    let applyPassenger = copyReceiveList.filter(item => item.actRole == '0');
    // 所有代领旅客
    let behalfPassengers = copyReceiveList.filter(item => item.actRole == '1');
    // 排序之后的数组
    let afterData = [];
    // 临时存id
    let tempArr = [];
    for (let i = 0; i < behalfPassengers.length; i++) {
      behalfPassengers[i].telephone = '-'; // 代领旅客电话号码为空
      if (tempArr.indexOf(behalfPassengers[i].idNo) === -1) { //afterData中不存在的数据， 直接添加
        behalfPassengers[i].origin = [{
          _paxName: behalfPassengers[i].paxName,
          _orderId: behalfPassengers[i].orderId,
          _payMoney: behalfPassengers[i].payMoney,
        }];
        afterData.push(behalfPassengers[i]);
        tempArr.push(behalfPassengers[i].idNo);
      } else {
        //afterData中存在的数据，比较idNo。 添加
        for (let j = 0; j < afterData.length; j++) {
          if (afterData[j].idNo == behalfPassengers[i].idNo) {
            // 叠加票号
            if (afterData[j].tktNo != behalfPassengers[i].tktNo) {
              afterData[j].tktNo += ` | ${behalfPassengers[i].tktNo}`;
            }
            afterData[j].origin.push({
              _paxName: behalfPassengers[i].paxName,
              _orderId: behalfPassengers[i].orderId,
              _payMoney: behalfPassengers[i].payMoney,
            });
            break;
          }
        }
      }
    }
    // 补偿单号升序排序
    for (const item of afterData) {
      if (item.origin.length > 1) {
        item.origin.sort(function sortId(a, b) {
          return Number(a._orderId) - Number(b._orderId);
        })
      }
    }
    setAllBehalfs([...applyPassenger, ...afterData]);
  }, [receiveList])
  // 查看代领人信息
  const lookList = (v) => {
    handleDetailData(v);
    handleModal(true);
  };

  // 筛选ID类型
  const filterIDType = (IdType, actRole) => {
    if (IdType === 'NI') {
      return '身份证'
    } else if (IdType === 'PP') {
      return '护照'
    } else if (IdType === 'PSPT') {
      return '护照'
    } else {
      return '其他'
    }
  }

  // 筛选审核结果
  const filterChecked = ((item) => {
    if (item.actRole == 0) {
      if (item.applyPaxStatus == '1') {
        return '已通过'
      } else if (item.applyPaxStatus == '2') {
        return '未通过'
      } else {
        return '待审核'
      }
    } else {
      if (item.status === '0') {
        return '待审核'
      } else if (item.status === '1') {
        return '已通过'
      } else if (item.status === '2') {
        return '未通过'
      } else {
        return '待审核'
      }
    }
  })
  return (
    <>
      <div className={styles.rightPassenger} >
        <div className={styles.passengerTitle}>
          <span>{paytypeVlaue == '0' ? '不正常航班补偿' : (paytypeVlaue == '1' ? '异常行李补偿' : '旅客超售补偿')}旅客列表</span>
          <CloseOutlined onClick={() => { handleAnimation(false) }} style={{ cursor: "pointer" }} />
        </div>
        <Scrollbars autoHide style={{ height: "calc(100% - 56px)" }}>
          <Spin spinning={rightModelLoading} tip="加载中...">
            {/* 为了给空数据情况下 loading效果一个上边距 */}
            <div style={{ minHeight: "200px" }}>
              {allBehalfs && allBehalfs.map((v, index) => {
                return (
                  <div key={v.idNo + index} className={styles.item}>
                    <p className={styles.name}>
                      <span>{v.paxName}{v.actRole !== '0'?(v.withBaby === 'Y' ? (<span style={{color:"#999",fontSize:14}}>（含婴儿补偿）</span>) : ''):''} <span style={{ color: "#939295", fontSize: "14px", marginLeft: "8px" }}>{v.actRole === '0' ? '申领人' : '代领旅客'}</span></span>
                      <Button onClick={() => { lookList(v) }} size="small" style={{ float: "right" }} type="primary">查看</Button>
                    </p>
                    <div className={styles.content}>
                      <div>
                        <span>
                          {filterIDType(v.idType, v.actRole)}
                        </span>
                        <span>
                          {v.idNo}
                        </span>
                      </div>
                      <div>
                        <span>联系电话</span>
                        <span style={{ wordBreak: "break-all" }}>
                          {v.telephone}
                        </span>
                      </div>
                      {v.actRole === '0' ? null : (
                        <div>
                          <span>航段</span>
                          <span>{v.segment}</span>
                        </div>
                      )}
                      <div>
                        <span>
                          票号
                        </span>
                        <span style={{ wordBreak: "break-all" }}>
                          {v.tktNo ? v.tktNo : '-'}
                        </span>
                      </div>
                      {
                        v.origin && v.origin.length > 0 ? (<Timeline style={{ marginTop: 10 }}>
                          {v.origin && v.origin.map((item, i) => {
                            return <Timeline.Item
                              key={item._orderId + i + item._payMoney}
                              style={{ height: i === (v.origin.length - 1) ? "21px" : "32px" }}
                              dot={<div style={{
                                backgroundColor: '#e13b3b',
                                color: '#FFFFFF',
                                borderRadius: '50%',
                                fontSize: "12px",
                                width: 18,
                                height: 18,
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center'
                              }} >赔</div>}>补偿单号 {item._orderId}
                              <span style={{ marginLeft: "10px" }}>{item._payMoney}  元</span></Timeline.Item>
                          })}
                        </Timeline>) : null
                      }
                      <div>
                        <span>
                          审核
                              </span>
                        <span>
                          {filterChecked(v)}
                        </span>
                      </div>
                      {
                        <div>
                          <span>
                            原因
                                </span>
                          <span style={{ wordBreak: "break-all" }}>
                            {v.auditRemark ? v.auditRemark : '-'}
                          </span>
                        </div>
                      }
                    </div>
                  </div>
                )
              })}
            </div>
          </Spin>
        </Scrollbars>

      </div>
      <LookList {...{ detailData, handleModal, modalVisible }} />
    </>
  )
}

export default PassengerList;
